<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="轮播图" prop="carouselName">
				<el-input
						v-model="queryParams.carouselName"
						placeholder="请输入轮播图名称"
						clearable
						@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
<!--			<el-form-item label="状态" prop="status">-->
<!--				<el-select v-model="queryParams.status" placeholder="岗位状态" clearable>-->
<!--					<el-option-->
<!--						v-for="dict in dict.type.sys_normal_disable"-->
<!--						:key="dict.value"-->
<!--						:label="dict.label"-->
<!--						:value="dict.value"-->
<!--					/>-->
<!--				</el-select>-->
<!--			</el-form-item>-->
			<el-form-item label="创建时间">
				<el-date-picker
					v-model="dateRange"
					style="width: 240px"
					value-format="yyyy-MM-dd"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 工具栏 -->
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['btn.Carousel.add']"
				>新增</el-button>
			</el-col>
<!--			<el-col :span="1.5">-->
<!--				<el-button-->
<!--					type="success"-->
<!--					plain-->
<!--					icon="el-icon-edit"-->
<!--					size="mini"-->
<!--					:disabled="single"-->
<!--					@click="handleUpdate"-->
<!--					v-hasPermi="['btn.Carousel.update']"-->
<!--				>修改</el-button>-->
<!--			</el-col>-->
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['btn.Carousel.remove']"
				>删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['btn.Carousel.export']"
				>导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>
		<!-- 表单组件 -->
		<el-table v-loading="loading" :data="carouselList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="轮播图id" align="center" prop="id" />
			<el-table-column label="轮播图名称" align="center" prop="carouselName" />
			<el-table-column label="分类ID" align="center" prop="categoryId" />
			<el-table-column label="分类名称" align="center" prop="categoryName" />
			<el-table-column label="创建人" align="center" prop="username" />
			<el-table-column label="上传时间" align="center" prop="createDate" />
			<el-table-column label="修改时间" align="center" prop="changeDate" />
			<el-table-column label="状态" align="center" prop="status" />
			<el-table-column label="备注" align="center" prop="remark" />
			<el-table-column label="状态" align="center" prop="status">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.sys_is_show" :value="scope.row.status"/>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center" prop="createTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.createTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handlePublish(scope.row)"
            v-hasPermi="['btn.Carousel.update']"
          >发布</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['btn.Carousel.update']"
					>修改</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['btn.Carousel.remove']"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页组件 -->
		<el-pagination :current-page="queryParams.current" :total="total" :page-size="queryParams.size" style="padding: 30px 0; text-align: center;"
			layout="total, prev, pager, next, jumper" @current-change="getList" />
		<!-- 添加或修改Carousel对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
				<el-form-item label="轮播图id" prop="id">
					<el-input :disabled="true" v-model="form.id" placeholder="请输入轮播图id" />
				</el-form-item>
				<el-form-item label="轮播图名称" prop="carouselName">
					<el-input v-model="form.carouselName" placeholder="请输入轮播图名称" />
				</el-form-item>
        <el-form-item label="请选轮播图分类" prop="carouselId">
          <el-select v-model="form.categoryName" @change="changeSelect" placeholder="请选轮播图分类">
            <el-option v-for="(category,index) in form.carouseCategorylList" :key="index" :label="category.categoryName" :value="category.categoryId"></el-option>
          </el-select>
        </el-form-item>
				<el-form-item label="分类ID" prop="categoryId">
					<el-input :disabled="true" v-model="form.categoryId" placeholder="请输入分类ID" />
				</el-form-item>
				<el-form-item label="分类名称" prop="categoryName">
					<el-input :disabled="true" v-model="form.categoryName" placeholder="请输入分类名称" />
				</el-form-item>
				<el-form-item  v-if="!isAdd" label="创建人" prop="username">
					<el-input :disabled="true" v-model="form.username" placeholder="请输入创建人" />
				</el-form-item>
				<el-form-item v-if="!isAdd"  label="创建时间" prop="createDate">
					<el-input :disabled="true" v-model="form.createDate" placeholder="请输入创建时间" />
				</el-form-item>
				<el-form-item v-if="!isAdd"  label="修改时间" prop="changeDate">
					<el-input :disabled="true" v-model="form.changeDate" placeholder="请输入修改时间" />
				</el-form-item>
				<el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in dict.type.sys_is_show"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark" placeholder="请输入备注" />
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<!-- js脚本 -->
<script>
import {
  delCarouselById,
  addCarousel,
  updateCarouselById,
  getCarouselById,
  loadDataList,
  loadDataList as loadDataListCarousel, getCarouselCategory,publishCarouselById
} from "@/api/pcwl/carousel";
export default {

	name: "Carousel",
	dicts: ['sys_normal_disable','sys_is_show'],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
      // 分类列表
      categoryList: [
        {
          "categoryId":'1',
          "categoryName":'首页'
        },
        {
          "categoryId":'2',
          "categoryName":'景点'
        }
      ],
			// 轮播列表数据
			carouselList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
      // 是否是更新
      isAdd: false,
			// 日期范围
			dateRange: [],
			// 查询参数
			queryParams: {
				current: 1,
				size: 10,
				id: undefined,
				carouselName: undefined,
				categoryId: undefined,
				categoryName: undefined,
				username: undefined,
				createDate: undefined,
				changeDate: undefined,
				status: undefined,
				remark: undefined,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				id: [
					{ message: "轮播图id不能为空", trigger: "blur" }
				],
				carouselName: [
					{ required: true, message: "轮播图名称不能为空", trigger: "blur" }
				],
				categoryId: [
					{ required: true, message: "分类ID不能为空", trigger: "blur" }
				],
				categoryName: [
					{ required: true, message: "分类名称不能为空", trigger: "blur" }
				],
				username: [
					{ message: "创建人不能为空", trigger: "blur" }
				],
				createDate: [
					{ message: "上传时间不能为空", trigger: "blur" }
				],
				changeDate: [
					{ message: "修改时间不能为空", trigger: "blur" }
				],
				status: [
					{ message: "状态,1:正常，0:不展示不能为空", trigger: "blur" }
				],
				remark: [
					{ message: "备注不能为空", trigger: "blur" }
				],
			}
		};
	},
	created() {
		this.getList();
	},
	methods: {
		/** 查询轮播图信息列表 */
		getList(currentPage=1) {
			this.loading = true;
			this.queryParams.current=currentPage;
			// loadDataList(this.queryParams).then(response => {
			loadDataList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
				this.carouselList = response.data.records;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: undefined,
				carouselName: undefined,
				categoryId: undefined,
				categoryName: undefined,
				username: undefined,
				createDate: undefined,
				changeDate: undefined,
				status: undefined,
				remark: undefined,
			};
			this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.current = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.carouselId)
			this.single = selection.length!=1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
      // 要从后台取要用这个方法，暂时在前台用固定列表
      // this.getCarouselCategoryV();
      this.form.carouseCategorylList = this.categoryList;
      this.isAdd=true;
			this.open = true;
			this.title = "新增轮播图";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const carouselId = row.id || this.ids
			getCarouselById(carouselId).then(response => {
				this.form = response.data;
        this.form.carouseCategorylList = this.categoryList;
				this.open = true;
				this.title = "修改轮播图信息";
			});
		},
    /** 发布按钮操作 */
    handlePublish(row) {
      this.reset();
      const carouselId = row.id || this.ids
      console.log(carouselId)
      publishCarouselById(carouselId).then(response => {
        this.getList();
        this.$modal.msgSuccess("发布成功");
      });
    },
		/** 提交按钮 */
		submitForm: function() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.id != undefined) {
						updateCarouselById(this.form,this.form.id).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					} else {
						addCarousel(this.form).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const carouselId = row.id || this.ids;
			this.$modal.confirm('是否确认删除轮播图信息编号为"' + carouselId + '"的数据项？').then(function() {
				return delCarouselById(carouselId);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('carousel/export', {
				...this.queryParams
			}, `post_${new Date().getTime()}.xlsx`)
		},
    // 获取轮播图分类
    getCarouselCategoryV(){
      getCarouselCategory().then(response => {
        console.log(response.data);
        this.form.carouseCategorylList = response.data;
        this.open = true;
      });
    },
    // select的Change事件
    changeSelect(val) {
      this.form.categoryName=this.categoryList[val-1].categoryName;
      this.form.categoryId=this.categoryList[val-1].categoryId;
      console.log(val);
      // 判断是否为空值，空值则为全部项
      if (!val) {
        console.log(val);
      }
      //  触发查询事件
      // this.getList();
    }
	}
};
</script>
